<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据集新增</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<!-- jQuery-->
		<script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>

		<!-- layui-->
		<link rel="stylesheet" href="/static/plugins/layui/2.8.4/css/layui.css" media="all">
		<script src="/static/plugins/layui/2.8.4/layui.js" charset="utf-8"></script>
		
		
	</head>
	<style>
		.all-view{
			width: 90%;
			margin: 0 auto;
			margin-top: 20px;
		}
		.btn-view{
			margin-bottom: 10px;
			
		}
		.add-btn{
			width:120px;
		}
		.bottom-view{
			position: fixed;
			bottom: 0;
			width: 100%;
		}
		.add-btn-view{
			width: 260px;
			margin: 0 auto;
			margin-bottom: 40px;
		}
	</style>
	
	<body>
		
		<!--头部输入框-->
		
		<form class="layui-form layui-form-pane all-view" action="">
		
			<div class="layui-form-item">
				<label class="layui-form-label">数据集名称</label>
				<div class="layui-input-block">
				  <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
				</div>
			  </div>
		
			<div class="layui-form-item">
				<label class="layui-form-label">文本类型</label>
				<div class="layui-input-block">
				  <select name="interest" lay-filter="chooseType">
					<option value="">请选择</option>
					<option value="0" selected>泛文本</option>
					<option value="1" >问答对</option>
				  </select>
				</div>
			  </div>  
		
		
			<div class="layui-form-item layui-form-text" id="general-txt">
				<label class="layui-form-label">泛文本</label>
				<div class="layui-input-block">
				  <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
				</div>
			  </div>
			  
			  
			  <div id="QA-txt" hidden>
				  <button type="button" class="layui-btn btn-view">
				     <i class="layui-icon layui-icon-add-1"></i>新增问答对
				  </button>
				  <div class="layui-row  layui-col-space5" >
				    <div class="layui-col-xs6">
				      <div class="layui-form-item layui-form-text" >
				      	<label class="layui-form-label">问题</label>
				      	<div class="layui-input-block">
				      	  <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
				      	</div>
				        </div>
				    </div>
				    <div class="layui-col-xs6">
				      <div class="layui-form-item layui-form-text" >
				      	<label class="layui-form-label">答案</label>
				      	<div class="layui-input-block">
				      	  <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
				      	</div>
				        </div>
				    </div>
				  </div>
				  
				  
			  </div>
			  
			  
			  
			 
		</form>
		
		
		
		<div class="bottom-view">
			<div class="layui-btn-container add-btn-view">
			  <button type="button" class="layui-btn layui-btn-primary layui-border-blue add-btn">确定</button> 
			  <button type="button" class="layui-btn layui-btn-primary layui-border add-btn">取消</button> 
			</div>
		</div>
	
		
		
		<script>
			layui.use(function(){
			  var form = layui.form;
			  var layer = layui.layer;
			  // select 事件
			  form.on('select(chooseType)', function(data){
				var elem = data.elem; // 获得 select 原始 DOM 对象
				var value = data.value; // 获得被选中的值
				var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象
				if(value==0){
					$("#general-txt").show();
					$("#QA-txt").hide();
				}else{
					$("#general-txt").hide();
					$("#QA-txt").show();
				}
			  });
			});
		</script>
		
	</body>
</html>